<template>
      <div id="person">
            <div class="infoWrap">
              <!-- 用户展示左侧 begin -->
                  <div class="infoLeftWrap">
                        <img v-if="personInfo.img" :src="personInfo.img" class="infoLogo">
                        <img v-else src="/static/img/user.jpg" class="infoLogo">
                        <h1 class="infoUser">{{personInfo.username}}</h1>
                        <h2 class="infoCont">注册时间:{{$moment(personInfo.ctime).add(8,'hours').format("YYYY-MM-DD HH:mm:ss")}}</h2>
                        <img class="infoDing" src="/static/img/ding.png">
                        <img class="infoGit" src="/static/img/github.png">
                        <img class="infoGit" src="/static/img/xin.png">
                  </div>
              <!-- 用户展示左侧 end -->
                  
              <!-- 用户展示右侧 begin -->
                  
                  <div class="infoRightWrap">
                        <div style="padding-left:50px;">
                              <h1 class="infoTitle">个人信息</h1>
                              <h2 style="display:inline-block;width:260px;">
                                    <p class="infoTitle2">邮箱</p>
                                    <span class="infoCont">{{personInfo.email}}</span>
                              </h2>
                              <h2 style="display:inline-block;">
                                    <p class="infoTitle2">手机</p>
                                    <span class="infoCont">{{personInfo.phone}}</span>
                              </h2>
                        </div>
                        <div class="infoTag">
                              <p>标签</p>
                              <el-tag :key="tag" v-for="tag in personInfo.tag" :disable-transitions="false" type="info"> {{tag}}</el-tag>
                        </div>
                        <el-dropdown @command="select" style="position:absolute;right:100px;top:80px">
                              <span class="el-icon-more" style="transform:rotate(90deg);cursor:pointer"></span>
                              <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="{type:'edit'}">
                                          <i class="el-icon-edit"></i> 编辑信息</el-dropdown-item>
                                    <el-dropdown-item :command="{type:'reset'}">
                                          <i class="el-icon-delete"></i> 重置密码</el-dropdown-item>
                              </el-dropdown-menu>
                        </el-dropdown>
                  </div>
                  <!-- 用户展示右侧 end -->
            </div>

            <!-- 用户信息对话框 begin -->
            <el-dialog title="编辑" :visible.sync="dialogVisible" width="400px" @close="resetForm()">
                  <el-form ref="formData" :model="formData" label-width="80px" label-position="left" :rules="rules">
                        <el-form-item>
                              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess">
                                    <img v-if="formData.img" :src="formData.img" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <el-button size="small" type="primary">更换头像</el-button>
                              </el-upload>
                        </el-form-item>
                        <el-form-item label="用户名" prop="username">
                              <el-input v-model="formData.username"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop="phone">
                              <el-input v-model="formData.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                              <el-input v-model="formData.email"></el-input>
                        </el-form-item>
                        <el-form-item label="标签">
                              <el-tag :key="tag" v-for="tag in formData.tag" closable :disable-transitions="false" @close="handleClose(tag)" type="info"> {{tag}}</el-tag>
                              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
                              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增</el-button>
                        </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false;">取 消</el-button>
                        <el-button type="primary" :icon="btnIcon" :disabled="buttonDisabled" @click="editComfire">确 定</el-button>
                  </span>
            <!-- 用户信息对话框 end -->
                  
            </el-dialog>

            <!-- 重置密码 begin -->
            <el-dialog title="重置密码" :visible.sync="dialogVisible1" width="400px" @close="resetForm1()">
                  <el-form ref="formData1" :model="formData1" label-width="80px" label-position="left" :rules="rules">
                        <el-form-item label="新密码" prop="pass">
                              <el-input v-model="formData1.pass" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="prepass">
                              <el-input v-model="formData1.prepass" type="password"></el-input>
                        </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false;">取 消</el-button>
                        <el-button type="primary" :icon="btnIcon" :disabled="buttonDisabled" @click="passComfire">确 定</el-button>
                  </span>
            <!-- 重置密码 end -->
            
            </el-dialog>
      </div>
</template>
<script>
export default {
  data() {
    //   验证手机格式是否正确
    var validatePhone = (rule, value, cb) => {
      let reg = /^1[3456789]\d{9}$/;
      if (reg.test(value)) {
        cb();
      } else {
        cb(new Error("手机号码不正确"));
      }
    };
    //   验证用户名是否注册
    var usernameExist = (rule, value, cb) => {
      this.$http
        .post("/users/usernameExist", this.$qs.stringify(this.formData))
        .then(result => {
          if (result.data.data == "false") {
            cb();
          } else {
            cb(new Error("用户名已被注册"));
          }
        });
    };
    // 验证手机是否注册
    var phoneExist = (rule, value, cb) => {
      this.$http
        .post("/users/phoneExist", this.$qs.stringify(this.formData))
        .then(result => {
          if (result.data.data == "false") {
            cb();
          } else {
            cb(new Error("手机已被注册"));
          }
        });
    };
    // 验证邮箱是否注册
    var emailExist = (rule, value, cb) => {
      this.$http
        .post("/users/emailExist", this.$qs.stringify(this.formData))
        .then(result => {
          if (result.data.data == "false") {
            cb();
          } else {
            cb(new Error("邮箱已被注册"));
          }
        });
    };
    // 验证两次密码输入是否一致
    var validatePass2 = (rule, value, cb) => {
      if (value != this.formData1.pass) {
        cb(new Error("两次密码输入不一致"));
      } else {
        cb();
      }
    };
    return {
      personInfo: {},
      dynamicTags: ["开朗", "技术达人", "热情"],
      inputVisible: false,
      dialogVisible1: false,
      inputValue: "",
      dialogVisible: false,
      btnIcon: "",
      formData: {
        username: "",
        phone: "",
        email: "",
        tag: [],
        oldname: "",
        oldphone: "",
        oldemail: "",
        img: ""
      },
      formData1: {
        pass: "",
        prepass: ""
      },
      buttonDisabled: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 18, message: "长度在4~18位间", trigger: "change" },
          { validator: usernameExist, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: phoneExist, trigger: "blur" },
          { validator: validatePhone, trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "邮箱格式有误",
            trigger: ["blur", "change"]
          },
          { validator: emailExist, trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在6~18位间", trigger: "change" }
        ],
        prepass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass2, trigger: "change" }
        ]
      }
    };
  },
  methods: {
    // 获取用户信息路由
    getPerson() {
      this.$http
        .get("/users/one")
        .then(result => {
          this.personInfo = result.data.data;
          this.personInfo.tag = JSON.parse(result.data.data.tag);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // tag删除方法
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    //展示input 用于增加tag
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // tag确认方法
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.formData.tag.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 上传图片方法
    handleAvatarSuccess(res, file) {
      this.formData.img = URL.createObjectURL(file.raw);
    },
    // 下拉列表的配置
    select(obj) {
      switch (obj.type) {
        // 编辑信息方法
        case "edit":
          this.infoEdit();
          break;
        // 修改密码方法
        case "reset":
          this.infoReset();
          break;
        default:
      }
    },
    //  重置用户密码方法
    infoReset() {
      this.dialogVisible1 = true;
    },
    //  编辑用户信息方法
    infoEdit() {
      this.dialogVisible = true;
      this.formData.username = this.personInfo.username;
      this.formData.oldname = this.personInfo.username;
      this.formData.email = this.personInfo.email;
      this.formData.oldemail = this.personInfo.email;
      this.formData.phone = this.personInfo.phone;
      this.formData.oldphone = this.personInfo.phone;
      this.formData.tag = this.personInfo.tag;
      this.formData.img=this.personInfo.img
    },
    // 重置表单方法
    resetForm() {
      this.$refs.formData.resetFields();
    },
    // 重置密码对话框
    resetForm1() {
      this.$refs.formData1.resetFields();
    },
    // 编辑确认
    editComfire() {
      this.$refs.formData.validate(pass => {
        if (!pass) {
          return;
        }
        this.btnIcon = "el-icon-loading";
        this.buttonDisabled = true;
        this.$http
          .post(
            "/person/edit",
            this.$qs.stringify({
              username: this.formData.username,
              phone: this.formData.phone,
              email: this.formData.email,
              tag: JSON.stringify(this.formData.tag),
              img: this.formData.img
            })
          )
          .then(result => {
            if (result.data.error == 0) {
              this.btnIcon = "";
              this.buttonDisabled = false;
              this.getPerson();
              this.dialogVisible = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    // 修改密码确认
    passComfire() {
      this.$refs.formData1.validate(pass => {
        if (!pass) {
          return;
        }
        this.btnIcon = "el-icon-loading";
        this.buttonDisabled = true;
        this.$http
          .post(
            "/person/pass",
            this.$qs.stringify({
              password: this.formData1.pass
            })
          )
          .then(result => {
            if (result.data.error == 0) {
              this.btnIcon = "";
              this.buttonDisabled = false;
              this.getPerson();
              this.dialogVisible1 = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
    }
  },
  created() {
    // 调用获取信息路由方法
    this.getPerson();
  }
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 30px;
}
.button-new-tag {
  margin-left: 30px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 30px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 45px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
}

/* 个人中心样式 begin */
.infoWrap {
  display: flex;
  width: 100%;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.infoLeftWrap {
  width: 30%;
  text-align: center;
  border-right: 1px solid #ececec;
  padding: 60px 0;
}
.infoLogo{
      width: 96px;
      height: 96px;
      display: block;
      margin:0 auto;
}
.infoRightWrap {
  padding: 60px 0;
  flex: 1;
  position: relative;
}
.infoUser {
  color: #848484;
  font-size: 24px;
}
.infoTag {
  border-top: 1px solid #ececec;
  padding-top: 20px;
  padding-left: 50px;
}
.infoDing {
  width: 32px;
  margin-top: 40px;
}
.infoGit {
  width: 32px;
  margin-left: 30px;
  margin-top: 40px;
}
.infoTitle {
  columns: #9c9c9c;
  font-size: 16px;
}
.infoTitle2 {
  color: #6f6f6f;
  font-size: 16px;
}
.infoCont {
  color: #adadad;
  font-size: 16px;
}

/* 个人中心样式 end */
</style>


